Angular-এ রাউটিং এবং নেভিগেশন খুবই গুরুত্বপূর্ণ বৈশিষ্ট্য, যা ব্যবহারকারীদের এক পেজ থেকে অন্য পেজে নেভিগেট করার সুযোগ দেয়। এটি Single Page Application (SPA) তৈরি করতে ব্যবহৃত হয়, যেখানে অ্যাপ্লিকেশনটির একটিমাত্র পেজ লোড হয় এবং শুধুমাত্র প্রয়োজনীয় অংশ পুনরায় লোড বা পরিবর্তন হয়। Angular রাউটার ব্যবহৃত হয় ইউআরএল এবং কম্পোনেন্টের মধ্যে সম্পর্ক স্থাপন করতে এবং ইউআই তে ভিন্ন ভিন্ন ভিউ রেন্ডার করতে।
Angular-এ রাউটিং কনফিগারেশন শুরু করার জন্য প্রথমে RouterModule ইম্পোর্ট করতে হয় এবং অ্যাপ্লিকেশনের রাউট কনফিগারেশন সেট করা হয়। এর মাধ্যমে ইউআরএল প্যাটার্ন নির্ধারণ করা হয় এবং এই প্যাটার্নের সঙ্গে সম্পর্কিত কম্পোনেন্ট লোড করা হয়।
প্রথমে, AppRoutingModule তৈরি করতে হয়:
ng generate module app-routing --flat --module=app
এখন, app-routing.module.ts ফাইলে রাউট কনফিগারেশন হবে:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { NotFoundComponent } from './not-found/not-found.component';
const routes: Routes = [
{ path: '', component: HomeComponent }, // Default path
{ path: 'about', component: AboutComponent },
{ path: '**', component: NotFoundComponent } // Wildcard for unknown routes
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
এখানে:
path: '' হল ডিফল্ট রুট, অর্থাৎ অ্যাপ্লিকেশন লোড হলে হোম পেজটি দেখাবে।path: 'about' হল /about পেজের জন্য রাউট, যেখানে AboutComponent লোড হবে।path: '**' wildcard রুট হিসেবে ব্যবহৃত হয়, যা অজানা বা ভুল URL-এর জন্য 404 পেজ (যেমন NotFoundComponent) প্রদর্শন করবে।এখন, AppRoutingModule কে AppModule-এ অন্তর্ভুক্ত করতে হবে:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule // Import the routing module here
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
এখন রাউটিং কনফিগারেশন কার্যকরী হবে।
Angular-এ নেভিগেশন হলো রাউটার ব্যবহার করে এক পেজ থেকে অন্য পেজে যাওয়ার প্রক্রিয়া। Angular রাউটার ব্যবহার করে ইউআরএল পরিবর্তন, হ্যান্ডলিং এবং কম্পোনেন্ট রেন্ডার করা যায়।
এতে HTML টেমপ্লেটে routerLink অ্যাট্রিবিউট ব্যবহার করে রাউট লিঙ্ক তৈরি করা হয়। উদাহরণস্বরূপ:
<a routerLink="/">Home</a>
<a routerLink="/about">About</a>
এখানে, routerLink="/" হোম পেজের জন্য এবং routerLink="/about" অ্যাবাউট পেজের জন্য ব্যবহৃত হয়।
Angular রাউটারের মাধ্যমে নেভিগেট করার জন্য <router-outlet> ট্যাগ ব্যবহার করা হয়, যা এখানে রেন্ডার হওয়া কম্পোনেন্টকে ধরবে। এটি সাধারণত অ্যাপের মূল কম্পোনেন্টের টেমপ্লেটে রাখা হয়।
<router-outlet></router-outlet>
এখানে, রাউটিং অনুযায়ী বিভিন্ন কম্পোনেন্ট router-outlet এর মধ্যে রেন্ডার হবে।
Angular-এ আপনি রাউটার ইন্সট্যান্স ব্যবহার করে প্রোগ্রামেটিকালি নেভিগেটও করতে পারেন। এটি Router সার্ভিসের navigate() মেথড ব্যবহার করে করা হয়।
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-home',
template: `<button (click)="goToAbout()">Go to About</button>`
})
export class HomeComponent {
constructor(private router: Router) {}
goToAbout() {
this.router.navigate(['/about']);
}
}
এখানে, goToAbout() মেথডটি ব্যবহারকারী যখন বাটনে ক্লিক করবে, তখন তাকে /about রুটে নেভিগেট করবে।
রাউট গার্ডস Angular-এ একটি গুরুত্বপূর্ণ ফিচার, যা রাউট পরিবর্তন হওয়ার আগে কিছু শর্ত পরীক্ষা করতে ব্যবহৃত হয়। যেমন, ইউজার অথেন্টিকেশন চেক, ডেটা লোড, এবং অন্যান্য কাস্টম যাচাই।
ধরা যাক, একটি AuthGuard তৈরি করা হয় যা চেক করবে ব্যবহারকারী লগ ইন হয়েছে কিনা:
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private router: Router) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
const isAuthenticated = false; // Assume the user is not authenticated
if (!isAuthenticated) {
this.router.navigate(['/login']);
return false;
}
return true;
}
}
এবং routes কনফিগারেশনে গার্ডটি যুক্ত করা হয়:
const routes: Routes = [
{ path: 'about', component: AboutComponent, canActivate: [AuthGuard] },
// other routes
];
এখন, ব্যবহারকারী যদি অথেন্টিকেশন না করে থাকে, তবে সে /about রুটে যেতে পারবে না এবং তাকে লগইন পেজে রিডিরেক্ট করা হবে।
Angular রাউটিং এবং নেভিগেশন ব্যবস্থাপনা অ্যাপ্লিকেশন গুলোর মধ্যে ইউজার ইন্টারঅ্যাকশন সহজ করে এবং স্পষ্টভাবে বিভিন্ন ভিউ রেন্ডার করে। এটি Single Page Application (SPA) তৈরি করার জন্য খুবই কার্যকর, এবং রাউটিং কনফিগারেশন, নেভিগেশন, গার্ডস, এবং প্রোগ্রামেটিক নেভিগেশন এর মাধ্যমে Angular অ্যাপ্লিকেশন খুবই শক্তিশালী এবং স্কেলেবল হয়।
Angular অ্যাপ্লিকেশন গুলিতে রাউটিং ব্যবহার করে একাধিক ভিউ বা পেজ তৈরি করা হয়। RouterModule এর মাধ্যমে Angular অ্যাপ্লিকেশনগুলিতে URL ভিত্তিক নেভিগেশন পরিচালনা করা হয়। রাউটিং কনফিগার করা হয় যাতে নির্দিষ্ট URL-এর জন্য নির্দিষ্ট কম্পোনেন্ট বা ভিউ রেন্ডার করা যায়।
প্রথমে, Angular অ্যাপ্লিকেশনে রাউটিং কনফিগার করতে AppRoutingModule তৈরি করতে হবে। আপনি CLI ব্যবহার করে এটি তৈরি করতে পারেন:
ng generate module app-routing --flat --module=app
এটি একটি app-routing.module.ts ফাইল তৈরি করবে, যেখানে রাউটিং কনফিগারেশন করা হবে।
app-routing.module.ts ফাইলে রাউট কনফিগারেশন করতে হবে। এখানে আপনি যেসব কম্পোনেন্ট URL এর সাথে যুক্ত করতে চান, সেগুলোর রুটের পাথ এবং সংশ্লিষ্ট কম্পোনেন্ট উল্লেখ করবেন।
উদাহরণস্বরূপ, ধরুন আমাদের দুটি কম্পোনেন্ট আছে: HomeComponent এবং AboutComponent।
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { NotFoundComponent } from './not-found/not-found.component';
const routes: Routes = [
{ path: '', component: HomeComponent }, // Default Route
{ path: 'about', component: AboutComponent }, // About Page Route
{ path: '**', component: NotFoundComponent } // Wildcard Route for 404
];
@NgModule({
imports: [RouterModule.forRoot(routes)], // Configuring RouterModule
exports: [RouterModule]
})
export class AppRoutingModule { }
এখানে:
/ হবে, তখন এটি HomeComponent রেন্ডার করবে)।/about ইউআরএল-এ গিয়ে AboutComponent রেন্ডার করবে।NotFoundComponent রেন্ডার করবে (404 পেজ হিসেবে কাজ করবে)।রাউটিং কনফিগারেশন তৈরি করার পর, এই মডিউলটি app.module.ts ফাইলে ইম্পোর্ট করতে হবে।
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module'; // Importing the routing module
@NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent,
NotFoundComponent
],
imports: [
BrowserModule,
AppRoutingModule // Adding routing module here
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
এখানে, AppRoutingModule কে imports অ্যারে তে যোগ করা হয়েছে, যা রাউটিং কার্যকর করে।
এখন, আপনি অ্যাপ্লিকেশনে বিভিন্ন পেজে নেভিগেট করতে routerLink ডিরেক্টিভ ব্যবহার করতে পারেন। এই ডিরেক্টিভের মাধ্যমে ইউজার একটি নির্দিষ্ট রুটে নেভিগেট করবে।
<nav>
<a routerLink="/">Home</a> |
<a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>
এখানে:
Angular-এ আপনি প্রোগ্রাম্যাটিকভাবে নেভিগেট করতে Router সার্ভিস ব্যবহার করতে পারেন। এতে আপনি কোনো ইভেন্ট বা অ্যাকশন ঘটলে রাউট পরিবর্তন করতে পারেন।
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
template: `<button (click)="navigateToAbout()">Go to About</button>`
})
export class AppComponent {
constructor(private router: Router) {}
navigateToAbout() {
this.router.navigate(['/about']);
}
}
এখানে, navigateToAbout() মেথডটি about রুটে নেভিগেট করবে।
কিছু রুটের জন্য আপনি Guards ব্যবহার করে রাউট অ্যাক্সেস কন্ট্রোল করতে পারেন। যেমন CanActivate গার্ড ব্যবহার করে আপনি কোনো রুট অ্যাক্সেস করার আগে শর্ত চেক করতে পারেন। এটি Authentication বা Authorization চেক করার জন্য ব্যবহৃত হয়।
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private router: Router) {}
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean {
const isAuthenticated = false; // Add your authentication check logic here
if (isAuthenticated) {
return true;
} else {
this.router.navigate(['/login']);
return false;
}
}
}
এখানে AuthGuard গার্ড ব্যবহার করে একটি রুটের আগে অ্যাক্সেস চেক করা হচ্ছে। যদি ইউজার লগইন না থাকে, তবে সে লগইন পেজে রিডিরেক্ট হবে।
Angular অ্যাপ্লিকেশনগুলিতে রাউটিং ব্যবস্থাপনা করতে RouterModule এবং Route Configuration ব্যবহার করা হয়। এই ডিরেক্টিভ এবং কনফিগারেশনগুলো Angular অ্যাপ্লিকেশনকে একাধিক পেজ বা ভিউতে নেভিগেট করতে সহায়ক হয়, এবং Single Page Application (SPA) এর কাঠামোকে সহজ করে তোলে।
Angular-এর RouterModule একটি মডিউল, যা অ্যাপ্লিকেশনকে রাউটিং কনফিগারেশনের সাথে সংযোগ করতে সাহায্য করে। এর মাধ্যমে বিভিন্ন রুট এবং সেগুলোর কম্পোনেন্ট ম্যাপিং করা যায়, যেগুলি ব্যবহারকারী URL অনুযায়ী অ্যাক্সেস করতে পারে। RouterModule সাধারণত AppRoutingModule-এ অন্তর্ভুক্ত করা হয় এবং তারপর এটি AppModule-এ ইম্পোর্ট করা হয়।
Route Configuration হলো সেই পদ্ধতি যেখানে আপনি URL এবং কম্পোনেন্টের মধ্যে সম্পর্ক নির্ধারণ করেন। এতে রাউটের URL পাথ এবং সংশ্লিষ্ট কম্পোনেন্টের ম্যাপিং করা হয়। Angular রাউটারের সাহায্যে URL পরিবর্তনের উপর ভিত্তি করে নির্দিষ্ট কম্পোনেন্টগুলো লোড করা হয়।
প্রথমে AppRoutingModule তৈরি করতে হবে, যেখানে রাউট কনফিগার করা হবে। Angular CLI ব্যবহার করে এই মডিউলটি তৈরি করা যেতে পারে:
ng generate module app-routing --flat --module=app
এখন, app-routing.module.ts ফাইলে রাউট কনফিগারেশন সংজ্ঞায়িত করা হবে:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { NotFoundComponent } from './not-found/not-found.component';
const routes: Routes = [
{ path: '', component: HomeComponent }, // Default Route
{ path: 'about', component: AboutComponent }, // About Page Route
{ path: '**', component: NotFoundComponent } // Wildcard Route (404)
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
এখানে:
path: '' হল ডিফল্ট রুট, যা প্রথমে লোড হবে, সাধারণত হোম পেজ।path: 'about' ইউআরএল /about কে AboutComponent কম্পোনেন্টের সাথে ম্যাপ করে।path: '**' একটি wildcard রাউট যা যেকোন অজানা বা অপ্রত্যাশিত রুটের জন্য ব্যবহার করা হয়, যা সাধারণত একটি 404 পেজ হিসেবে ব্যবহৃত হয়।Angular অ্যাপ্লিকেশনের মধ্যে পেইজে নেভিগেট করার জন্য RouterLink ডিরেক্টিভ ব্যবহার করা হয়। এর মাধ্যমে, ইউজার যখন একটি লিংক ক্লিক করবে, তখন তা নির্দিষ্ট রুটে নেভিগেট করবে। এটি প্রথাগত HTML <a> ট্যাগের মতো কাজ করে, তবে পেজ রিফ্রেশ না করে অ্যাঙ্গুলারের ভিতরে থাকা নতুন কম্পোনেন্ট লোড করে।
<!-- Home Page Link -->
<a routerLink="/">Home</a>
<!-- About Page Link -->
<a routerLink="/about">About</a>
এখানে, routerLink="/" হোম পেজে এবং routerLink="/about" অ্যাবাউট পেজে নেভিগেট করবে।
RouterLinkActive ডিরেক্টিভটি ব্যবহৃত হয় রাউট লিংকটির অ্যাক্টিভ অবস্থার উপর ভিত্তি করে CSS ক্লাস যোগ করতে। এটি সাধারণত লিঙ্কে সিএসএস স্টাইল অ্যাড করার জন্য ব্যবহৃত হয় যখন তা অ্যাক্টিভ থাকে।
<a routerLink="/" routerLinkActive="active">Home</a>
<a routerLink="/about" routerLinkActive="active">About</a>
এখানে, যখন একটি রুট অ্যাক্টিভ হবে, তখন active ক্লাসটি ওই লিঙ্কে যোগ করা হবে।
Router.navigate() পদ্ধতি ব্যবহার করে প্রোগ্রাম্যাটিকালি রাউট করা যেতে পারে। এটি একটি কম্পোনেন্ট বা সার্ভিস থেকে URL পরিবর্তন করতে ব্যবহৃত হয়।
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-nav',
template: `
<button (click)="goToHome()">Go to Home</button>
`
})
export class NavComponent {
constructor(private router: Router) { }
goToHome() {
this.router.navigate(['/']);
}
}
এখানে, goToHome() মেথডটি Router.navigate() ব্যবহার করে / রুটে নেভিগেট করবে, অর্থাৎ হোম পেজে যাবে।
Angular রাউটিং এ আপনি ডাইনামিক প্যারামিটার পাঠাতে পারেন। এটি বিভিন্ন ইউজার ইনপুট বা ডেটার উপর ভিত্তি করে রাউট পরিবর্তন করতে সাহায্য করে।
// রাউট কনফিগারেশন
const routes: Routes = [
{ path: 'user/:id', component: UserComponent }
];
// URL: '/user/123'
এখানে, :id প্যারামিটার ব্যবহার করা হয়েছে, যা URL থেকে ডাইনামিকভাবে একটি মান গ্রহণ করবে (যেমন 123)। এই প্যারামিটারটি কম্পোনেন্টে ActivatedRoute ব্যবহার করে অ্যাক্সেস করা যেতে পারে।
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-user',
template: `<h1>User ID: {{ userId }}</h1>`
})
export class UserComponent implements OnInit {
userId: string | null = '';
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.userId = this.route.snapshot.paramMap.get('id');
}
}
এখানে, ActivatedRoute ব্যবহার করে URL প্যারামিটার id গ্রহণ করা হচ্ছে এবং তা কম্পোনেন্টে প্রদর্শন করা হচ্ছে।
Angular-এর RouterModule এবং Route Configuration অ্যাপ্লিকেশনে বিভিন্ন পেজ বা ভিউ নেভিগেট করার জন্য অত্যন্ত গুরুত্বপূর্ণ। এগুলি ব্যবহার করে, আপনি URL এর সাথে কম্পোনেন্ট ম্যাপিং করতে পারেন এবং Angular-এর ডায়নামিক রাউটিং ও নেভিগেশন সুবিধা উপভোগ করতে পারেন।
Angular অ্যাপ্লিকেশনে Route Parameters এবং Query Parameters ব্যবহার করে বিভিন্ন ধরণের ডেটা পাস করা যায়, যা এক পৃষ্ঠার মধ্যে বিভিন্ন কম্পোনেন্ট বা ভিউয়ের মধ্যে নেভিগেশন করতে সাহায্য করে। এটি Single Page Applications (SPA) এ ডেটা ট্রান্সফার এবং ইউআরএল (URL) দ্বারা অ্যাপ্লিকেশনের নির্দিষ্ট স্টেট রেটেন করতে গুরুত্বপূর্ণ ভূমিকা পালন করে।
Route Parameters URL-এর অংশ হিসেবে ব্যবহারকারীর কাছ থেকে ডেটা গ্রহণ করার পদ্ধতি। এটি সাধারণত dynamic routing বা parameterized routes-এ ব্যবহৃত হয়। উদাহরণস্বরূপ, যখন আপনি একটি আইডি বা অন্য কোনো মান URL-এ পাস করতে চান, তখন Route Parameters ব্যবহার করা হয়।
আপনি URL প্যাটার্নের মধ্যে নির্দিষ্ট প্যারামিটার ব্যবহার করতে পারেন, যেগুলি ডাইনামিকভাবে URL-এর মাধ্যমে পাওয়া যাবে। যেমন:
/user/:id
এখানে :id হল একটি route parameter, যা URL-এর মধ্যে ডাইনামিক মান গ্রহণ করবে। উদাহরণস্বরূপ, /user/123 অথবা /user/456 এই ধরনের URL এ id প্যারামিটারটি পাস হবে।
রাউটিং কনফিগারেশনে Route Parameters ব্যবহার করতে হবে। উদাহরণস্বরূপ:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserComponent } from './user/user.component';
const routes: Routes = [
{ path: 'user/:id', component: UserComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
এখানে :id হলো Route Parameter, যেটি UserComponent কম্পোনেন্টে পাস হবে।
Route Parameter-কে Angular কম্পোনেন্টে ActivatedRoute ব্যবহার করে অ্যাক্সেস করা যায়। উদাহরণ:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-user',
template: '<h1>User ID: {{ userId }}</h1>',
})
export class UserComponent implements OnInit {
userId: string;
constructor(private route: ActivatedRoute) {}
ngOnInit(): void {
this.userId = this.route.snapshot.paramMap.get('id')!;
}
}
এখানে, this.route.snapshot.paramMap.get('id') ব্যবহার করে id প্যারামিটারটি নেওয়া হচ্ছে। snapshot হলো রাউটের বর্তমান স্টেট, এবং paramMap হলো URL থেকে প্যারামিটারগুলোর মান ধারণ করে।
Query Parameters URL এর অংশ হিসেবে ব্যবহার করা হয় যেখানে ডেটার কিওয়ারি প্যারামিটারগুলি পাস করা হয়। সাধারণত, URL-এর শেষে ?key=value প্যাটার্নে query parameters থাকে। এই প্যারামিটারগুলো সাধারণত ঐতিহ্যগত ওয়েব অ্যাপ্লিকেশনের URL-এ দেখা যায় যেমন ?page=1&sort=desc।
Query parameters URL-এর শেষে ?key=value এর মাধ্যমে যুক্ত হয়। একাধিক query parameters থাকলে এগুলোর মধ্যে & দিয়ে আলাদা করা হয়।
যেমন:
/search?term=angular&page=1
এখানে, term এবং page হচ্ছে query parameters।
Angular-এ Query Parameters ব্যবহার করতে, রাউটিং কনফিগারেশনে পরিবর্তন করতে হবে না, কারণ query parameters URL-এ পাস করা হয় এবং তা আলাদা ভাবে রাউট কনফিগারেশনের অংশ হয় না।
Query Parameters অ্যাক্সেস করতে ActivatedRoute এর queryParamMap ব্যবহার করা হয়। উদাহরণ:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-search',
template: '<h1>Search Term: {{ searchTerm }}</h1>',
})
export class SearchComponent implements OnInit {
searchTerm: string = '';
page: number = 1;
constructor(private route: ActivatedRoute) {}
ngOnInit(): void {
this.route.queryParamMap.subscribe(params => {
this.searchTerm = params.get('term')!;
this.page = +params.get('page')!; // convert to number
});
}
}
এখানে:
this.route.queryParamMap.subscribe() ব্যবহার করা হয়েছে query parameters নেওয়ার জন্য।params.get('term') এবং params.get('page') ব্যবহার করে query parameters অ্যাক্সেস করা হয়েছে।| বৈশিষ্ট্য | Route Parameters | Query Parameters |
|---|---|---|
| ব্যবহৃত হয় | URL প্যাটার্নে (যেমন /user/:id) | URL-এর শেষে ?key=value প্যাটার্নে |
| উদাহরণ | /user/123 | /search?term=angular&page=1 |
| অ্যাক্সেস পদ্ধতি | paramMap (ActivatedRoute.snapshot) | queryParamMap (ActivatedRoute.queryParamMap) |
| প্রয়োজনীয়তা | সাধারণত URL প্যারামিটার অপরিহার্য | ঐচ্ছিক, প্রয়োজনে প্রয়োগ করা হয় |
Route Parameters এবং Query Parameters উভয়ই Angular অ্যাপ্লিকেশনের রাউটিং ব্যবস্থায় ডেটা পাস করার জন্য ব্যবহৃত হয়, তবে এগুলোর ব্যবহারের ক্ষেত্রে কিছু মৌলিক পার্থক্য রয়েছে। Route Parameters সাধারণত URL এর অংশ হিসেবে ব্যবহৃত হয় যেখানে আপনি যেকোনো ডাইনামিক ডেটা পাস করতে পারেন। Query Parameters URL এর শেষে ?key=value প্যাটার্নে থাকা কিওয়ারি প্যারামিটার দিয়ে ডেটা পাস করতে ব্যবহৃত হয় এবং তা ঐচ্ছিক থাকে।
Angular-এ চাইল্ড রাউটস একটি শক্তিশালী রাউটিং কনফিগারেশন যা একটি রুটের (প্যারেন্ট রুট) অধীনে সাব-রুট (চাইল্ড রুট) তৈরি করতে সাহায্য করে। এটি Nested Routing বা Nested Views তৈরি করার একটি উপায়, যার মাধ্যমে আপনি একটি পেজের মধ্যে একাধিক ভিউ লোড করতে পারেন।
এটি বিশেষত তখন ব্যবহৃত হয় যখন আপনাকে একাধিক কম্পোনেন্ট একে অপরের মধ্যে লোড করতে হয়, এবং একে অপরের সাথে সম্পর্কিত কনটেন্ট শো করতে হয়।
চাইল্ড রাউটস হলো মূল রুটের অধীনে সাব-রুটের সংজ্ঞা, যেগুলিকে মূল রুটের ভিউতে নেস্টেড (nested) হিসেবে দেখানো হয়। চাইল্ড রাউটস ব্যবহারের মাধ্যমে আপনি একটি কম্পোনেন্টের মধ্যে আরও অনেক কম্পোনেন্ট লোড করতে পারবেন, যেমন ড্যাশবোর্ডে বিভিন্ন সেকশন (Overview, Reports, Settings) থাকতে পারে, যেগুলোর প্রতিটির জন্য আলাদা রাউট কনফিগারেশন থাকবে।
চাইল্ড রাউটস তৈরি করতে হলে, প্রথমে আপনাকে প্যারেন্ট রাউট তৈরি করতে হবে এবং তারপরে সেটির অধীনে চাইল্ড রাউটস কনফিগার করতে হবে। উদাহরণস্বরূপ:
ধরা যাক, আমাদের একটি ড্যাশবোর্ড পেজ রয়েছে এবং তার অধীনে বিভিন্ন চাইল্ড রাউটস রয়েছে, যেমন "Overview", "Reports", এবং "Settings"।
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { OverviewComponent } from './dashboard/overview/overview.component';
import { ReportsComponent } from './dashboard/reports/reports.component';
import { SettingsComponent } from './dashboard/settings/settings.component';
const routes: Routes = [
{
path: 'dashboard', component: DashboardComponent, children: [
{ path: '', component: OverviewComponent }, // Default child route
{ path: 'overview', component: OverviewComponent },
{ path: 'reports', component: ReportsComponent },
{ path: 'settings', component: SettingsComponent }
]
},
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
এখানে:
/dashboard/overview এর জন্য OverviewComponent/dashboard/reports এর জন্য ReportsComponent/dashboard/settings এর জন্য SettingsComponentপ্যারেন্ট কম্পোনেন্টে router-outlet ব্যবহার করতে হবে যেখানে চাইল্ড কম্পোনেন্টগুলো লোড হবে।
<!-- dashboard.component.html -->
<h2>Welcome to the Dashboard!</h2>
<nav>
<a routerLink="overview">Overview</a>
<a routerLink="reports">Reports</a>
<a routerLink="settings">Settings</a>
</nav>
<router-outlet></router-outlet>
এখানে, routerLink এর মাধ্যমে চাইল্ড রাউটসের মধ্যে নেভিগেট করা হচ্ছে এবং router-outlet এর মাধ্যমে সেই কম্পোনেন্টটি রেন্ডার হবে।
এখানে আরও একটি উদাহরণ দেওয়া হলো যেখানে, একটি প্যারেন্ট কম্পোনেন্ট ProductComponent এবং তার অধীনে কয়েকটি চাইল্ড রাউট রয়েছে, যেমন "Product List", "Product Detail" ইত্যাদি।
const routes: Routes = [
{
path: 'products', component: ProductComponent, children: [
{ path: '', component: ProductListComponent }, // Default route
{ path: 'list', component: ProductListComponent },
{ path: 'detail/:id', component: ProductDetailComponent }
]
}
];
এখানে ProductComponent প্যারেন্ট কম্পোনেন্ট হিসেবে কাজ করবে এবং তার অধীনে ProductListComponent এবং ProductDetailComponent চাইল্ড রাউট হিসেবে কনফিগার করা হয়েছে।
চাইল্ড রাউটসেও আপনি ডাইনামিক প্যারামিটার ব্যবহার করতে পারেন, যেমন :id এর মাধ্যমে একটি নির্দিষ্ট প্রোডাক্টের ডিটেইলস দেখানো যেতে পারে।
{ path: 'detail/:id', component: ProductDetailComponent }
এটি ProductDetailComponent কে id প্যারামিটার গ্রহণ করার অনুমতি দেয়, এবং সেই প্যারামিটার ব্যবহার করে উপযুক্ত ডেটা লোড করা সম্ভব হয়।
Angular-এ চাইল্ড রাউটস ব্যবহারের মাধ্যমে আপনি একটি প্যারেন্ট রুটের অধীনে একাধিক সাব-রুট (চাইল্ড রুট) কনফিগার করতে পারেন। এটি nested views তৈরি করতে সাহায্য করে এবং অ্যাপ্লিকেশনের রাউটিং কাঠামোকে আরও মডুলার এবং স্কেলেবল করে তোলে।
Lazy loading হলো একটি প্রযুক্তি যা Angular অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করার জন্য ব্যবহৃত হয়। Lazy loading-এর মাধ্যমে Angular শুধুমাত্র প্রয়োজনীয় মডিউলগুলোকে লোড করে যখন সেগুলো ব্যবহার করা হয়। এর ফলে অ্যাপ্লিকেশনটি প্রথমবার লোড হওয়ার সময় কম সময় নেয় এবং পেজের মধ্যে unnecessary কোড লোড না হয়ে শুধু প্রয়োজনীয় কোডই লোড হয়।
Angular-এ Lazy Loading রাউটিংয়ের মাধ্যমে বিভিন্ন ফিচারের জন্য আলাদা আলাদা মডিউল তৈরি করা হয়, যেগুলো ইউজারের নেভিগেশন অনুযায়ী ডাইনামিক্যালি লোড হয়। এর ফলে অ্যাপ্লিকেশনটি দ্রুত লোড হয় এবং স্কেলেবল থাকে।
Lazy loading কনফিগার করার জন্য Angular-এ কিছু নির্দিষ্ট পদক্ষেপ অনুসরণ করতে হয়। এখানে পুরো প্রক্রিয়াটি ব্যাখ্যা করা হয়েছে:
প্রথমে আপনাকে একটি নতুন মডিউল তৈরি করতে হবে যেটি Lazy Loading এর মাধ্যমে লোড হবে। CLI ব্যবহার করে মডিউল তৈরি করতে পারেন:
ng generate module feature --route feature --module app-routing
এটি একটি feature মডিউল তৈরি করবে এবং সেই মডিউলটি app-routing.module.ts-এ রাউটিং কনফিগারেশনে যুক্ত হবে।
Lazy loading কাজ করার জন্য আপনার AppRoutingModule এ মডিউলটি loadChildren দিয়ে লোড করতে হবে।
ধরা যাক, আপনার অ্যাপ্লিকেশন দুটি রাউট রয়েছে, একটি হোম পেজ এবং একটি ফিচার পেজ। ফিচার পেজটিকে lazy load করা হবে।
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', component: HomeComponent },
{
path: 'feature',
loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
এখানে, loadChildren প্যারামিটারটি একটি ফাংশন নেয়, যা ডাইনামিকভাবে FeatureModule মডিউলটি লোড করবে। import() সিঙ্ক্রোনাস ভাবে মডিউল লোড করতে সহায়তা করে।
ফিচার মডিউলের নিজস্ব রাউটিং কনফিগারেশন থাকতে হবে যাতে feature পেজের জন্য প্রয়োজনীয় কম্পোনেন্ট লোড করা যায়।
// feature-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FeatureComponent } from './feature/feature.component';
const routes: Routes = [
{ path: '', component: FeatureComponent }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class FeatureRoutingModule { }
এখানে, RouterModule.forChild(routes) ব্যবহার করা হয়েছে, কারণ এটি একটি child route কনফিগারেশন। মূল রাউট মডিউলটি AppRoutingModule এবং FeatureModule এর জন্য পৃথকভাবে রাউটিং কনফিগার করা হয়েছে।
FeatureModule লোড করাএখন আপনার ফিচার মডিউলটি AppRoutingModule তে Lazy Load হতে প্রস্তুত। ফিচার মডিউলটি সাধারণত কম্পোনেন্ট এবং পরিষেবা দিয়ে গঠিত হবে:
// feature.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureRoutingModule } from './feature-routing.module';
import { FeatureComponent } from './feature/feature.component';
@NgModule({
declarations: [FeatureComponent],
imports: [
CommonModule,
FeatureRoutingModule
]
})
export class FeatureModule { }
এখানে, FeatureRoutingModule এ feature-routing.module.ts এর রাউটিং কনফিগারেশন ইনক্লুড করা হয়েছে, এবং FeatureComponent কম্পোনেন্ট যুক্ত করা হয়েছে।
Lazy loading, Angular অ্যাপ্লিকেশনের পারফরম্যান্স এবং স্কেলেবিলিটি বাড়াতে অত্যন্ত কার্যকর একটি কৌশল।
রাউট গার্ডস Angular অ্যাপ্লিকেশনের গুরুত্বপূর্ণ একটি ফিচার যা রাউট পরিবর্তনের পূর্বে কিছু শর্ত যাচাই করে। এটি ব্যবহারকারীর অ্যাপ্লিকেশন বা রাউটের নির্দিষ্ট অংশে প্রবেশের অনুমতি বা বাধা দিতে ব্যবহৃত হয়। রাউট গার্ডস মূলত CanActivate, CanDeactivate, CanLoad, Resolve, এবং CanActivateChild নামে কয়েকটি গার্ড প্রদান করে যা বিভিন্ন পরিস্থিতিতে ব্যবহৃত হয়।
CanActivate গার্ডটি একটি রাউট এক্সেস করার আগে রিটার্ন করা একটি শর্ত চেক করে। যদি শর্তটি পূর্ণ হয়, তবে রাউটটি অ্যাক্সেস করা যাবে, নতুবা ব্যবহারকারী অন্য কোথাও রিডিরেক্ট হবে। এটি সাধারণত ইউজার অথেনটিকেশন বা অথোরাইজেশনের জন্য ব্যবহৃত হয়।
উদাহরণ:
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private router: Router) {}
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
// Example: Check if user is logged in
if (localStorage.getItem('userLoggedIn')) {
return true;
} else {
this.router.navigate(['/login']);
return false;
}
}
}
এখানে, AuthGuard গার্ডটি ইউজার যদি লগইন না করে থাকে তবে /login পেজে রিডিরেক্ট করবে।
CanDeactivate গার্ডটি তখন ব্যবহার করা হয় যখন একটি ব্যবহারকারী কোনো কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে যেতে চায়, এবং আপনি চাইলে তার আগে কিছু নিশ্চিতকরণ (confirmation) বা শর্ত পরীক্ষা করতে পারেন। এটি সাধারণত ফর্ম সাবমিশন বা পেজের পরিবর্তন পূর্বে কোনো সতর্কীকরণ দেখানোর জন্য ব্যবহৃত হয়।
উদাহরণ:
import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';
export interface CanComponentDeactivate {
canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}
@Injectable({
providedIn: 'root'
})
export class UnsavedChangesGuard implements CanDeactivate<CanComponentDeactivate> {
canDeactivate(component: CanComponentDeactivate): Observable<boolean> | Promise<boolean> | boolean {
return component.canDeactivate ? component.canDeactivate() : true;
}
}
এখানে, CanComponentDeactivate ইন্টারফেসটি সুনির্দিষ্টভাবে canDeactivate() মেথডের জন্য কন্ট্রোল প্রদান করে, যা ফর্ম বা পেজের পরিবর্তন পূর্বে যাচাই করবে।
CanLoad গার্ডটি নির্দিষ্ট মডিউল লোড হওয়ার আগে চেক করে। এটি সাধারণত lazy-loaded মডিউল লোড করার আগে ব্যবহৃত হয়, যাতে শুধুমাত্র সঠিক ইউজাররা সেই মডিউল অ্যাক্সেস করতে পারে।
উদাহরণ:
import { Injectable } from '@angular/core';
import { CanLoad, Route, UrlSegment, Router } from '@angular/router';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AdminGuard implements CanLoad {
constructor(private router: Router) {}
canLoad(route: Route, segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean {
if (localStorage.getItem('userRole') === 'admin') {
return true;
} else {
this.router.navigate(['/not-authorized']);
return false;
}
}
}
এখানে, AdminGuard মডিউল লোড হওয়ার আগে ইউজারের রোল চেক করবে এবং যদি ইউজার admin না হয় তবে তাকে not-authorized পেজে রিডিরেক্ট করবে।
CanActivateChild গার্ডটি সাব-রাউটগুলোর জন্য ব্যবহৃত হয়। এটি মূলত কোনো প্যারেন্ট রাউটের অধীনে থাকা চাইল্ড রাউটগুলোর জন্য রেগুলেশন সেট করতে ব্যবহৃত হয়।
উদাহরণ:
import { Injectable } from '@angular/core';
import { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AdminChildGuard implements CanActivateChild {
canActivateChild(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
if (localStorage.getItem('userRole') === 'admin') {
return true;
} else {
return false;
}
}
}
এখানে, AdminChildGuard গার্ডটি চাইল্ড রাউটগুলোর জন্য ইউজারের রোল যাচাই করবে এবং শুধুমাত্র admin রোলধারী ইউজারকে সেগুলি অ্যাক্সেস করতে দেবে।
রাউট গার্ড ব্যবহার করার জন্য আপনাকে রাউট কনফিগারেশন-এ গার্ড যুক্ত করতে হবে। উদাহরণস্বরূপ:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './guards/auth.guard';
const routes: Routes = [
{ path: '', component: HomeComponent, canActivate: [AuthGuard] },
{ path: 'login', component: LoginComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
এখানে, canActivate: [AuthGuard] ব্যবহার করে, হোম পেজে যাওয়ার আগে AuthGuard গার্ডটি চেক করবে।
Angular রাউট গার্ডস আপনাকে রাউট এবং কম্পোনেন্ট পরিবর্তনের আগে বিভিন্ন শর্ত পরীক্ষা করার সুযোগ দেয়। এটি ইউজার অথেনটিকেশন, অথোরাইজেশন, ফর্ম সাবমিশন, এবং নির্দিষ্ট রাউট বা মডিউল লোডে শর্তাবলী নির্ধারণ করতে সহায়তা করে, যা অ্যাপ্লিকেশনকে নিরাপদ এবং ব্যবহারযোগ্য রাখে।
Angular-এ রাউট রেজলভার (Route Resolver) হল একটি বিশেষ ধরনের Angular সার্ভিস যা রাউটিং সিস্টেমের সাথে সংযুক্ত থাকে এবং রাউট লোড হওয়ার আগে নির্দিষ্ট ডেটা ফেচিং বা অ্যাসিনক্রোনাস অপারেশন সম্পন্ন করে। এটি একটি অ্যাঙ্গুলার রাউটের সাথে যুক্ত থাকে, যাতে ইউজার রাউটের টার্গেট কম্পোনেন্টে পৌঁছানোর আগেই প্রয়োজনীয় ডেটা লোড হয়ে যায়।
রাউট রেজলভার সাধারণত সেই ক্ষেত্রে ব্যবহার করা হয় যখন আপনার কম্পোনেন্টের জন্য কোন ডেটা সার্ভিস বা API কলের মাধ্যমে আসতে হবে এবং আপনি নিশ্চিত করতে চান যে কম্পোনেন্টটি শুধু ডেটা পাওয়ার পরই রেন্ডার হবে।
যখন Angular রাউটার কোন নতুন রাউট লোড করতে চায়, তখন আপনি একটি রেজলভার তৈরি করেন যা প্রয়োজনীয় ডেটা ফেচিং সম্পন্ন করবে। এই ডেটা ফেচিং সম্পন্ন হওয়ার পর রাউট রেন্ডার হবে।
রাউট রেজলভার সাধারণত resolve মেথডের মাধ্যমে কাজ করে যা একটি প্রমিস (Promise) বা Observable রিটার্ন করে। Angular রাউটার অপেক্ষা করবে যতক্ষণ না ডেটা লোড হয়ে যাবে এবং তারপর কম্পোনেন্টে নেভিগেট করবে।
১. রেজলভার সার্ভিস তৈরি করুন: প্রথমে একটি সার্ভিস তৈরি করতে হবে যেটি রেজলভার ফাংশনালিটি প্রদান করবে।
Angular CLI দিয়ে রেজলভার সার্ভিস তৈরি করতে:
ng generate service resolvers/data
এটি একটি data.resolver.ts নামক ফাইল তৈরি করবে।
২. রেজলভার সার্ভিসের কোড লিখুন: Resolve ইন্টারফেসটি ইমপ্লিমেন্ট করুন এবং resolve মেথডে ডেটা ফেচিং লজিক লিখুন।
import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { Observable } from 'rxjs';
import { DataService } from './data.service'; // আপনার ডেটা সার্ভিস
@Injectable({
providedIn: 'root'
})
export class DataResolver implements Resolve<any> {
constructor(private dataService: DataService) {}
resolve(): Observable<any> {
return this.dataService.getData(); // এখানে আপনার API কল বা ডেটা ফেচিং কোড থাকবে
}
}
এখানে:
resolve মেথডটি একটি Observable বা Promise রিটার্ন করবে।DataService হল একটি সার্ভিস যা ডেটা ফেচিংয়ের জন্য ব্যবহার করা হবে (এটি আপনার API কল বা অন্য যেকোনো ডেটা রিটার্ন করতে পারে)।একবার রেজলভার তৈরি হয়ে গেলে, এটি রাউট কনফিগারেশনে ব্যবহার করতে হবে যাতে রাউটের লোড হওয়ার সময় ডেটা ফেচিং হয়।
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { DataResolver } from './resolvers/data.resolver';
const routes: Routes = [
{
path: 'home',
component: HomeComponent,
resolve: { data: DataResolver } // রেজলভার যুক্ত করা হল
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
এখানে:
resolve প্রপার্টি ব্যবহার করে DataResolver রেজলভার অ্যাসাইন করা হয়েছে। এটি data নামে একটি প্রোপার্টি হিসাবে ডেটা রিটার্ন করবে।এখন, HomeComponent-এ আমরা রেজলভড ডেটা ব্যবহার করতে পারি। Angular রাউটার স্বয়ংক্রিয়ভাবে এই ডেটা ActivatedRoute এর মাধ্যমে কম্পোনেন্টে ইনজেক্ট করবে।
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
data: any;
constructor(private route: ActivatedRoute) {}
ngOnInit(): void {
this.data = this.route.snapshot.data['data']; // রেজলভড ডেটা অ্যাক্সেস করা
}
}
এখানে, ActivatedRoute.snapshot.data['data'] থেকে আমরা DataResolver এর মাধ্যমে রিটার্ন করা ডেটা অ্যাক্সেস করছি।
রাউট রেজলভার Angular অ্যাপ্লিকেশনগুলিতে ডেটা ফেচিং বা অন্যান্য অ্যাসিনক্রোনাস কাজগুলি সম্পন্ন করার জন্য ব্যবহৃত হয়। এটি রাউট লোড হওয়ার আগে নির্দিষ্ট ডেটা রিটার্ন করে এবং কম্পোনেন্টটিকে ডেটা রেন্ডার করার আগে একে প্রি-লোড করতে সহায়ক। এটি Angular অ্যাপ্লিকেশনের কর্মক্ষমতা এবং ইউজার এক্সপেরিয়েন্স উন্নত করতে সাহায্য করে।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
